@import "../mixin";

.login_panel.bln{
  background-color : white;
  width : 440px;
  margin : 0 auto;
  border-radius: 2px;
  box-shadow: 1px 1px 1px 1px #efefef ;
  padding : 10px;

  .login_panel_title{
    height : 60px;
    border-bottom: 2px #efefef solid;
    font-size: 20px;
    line-height : 60px;
    text-align : center;
  }

  $form_ele_width: 280px;
  form.login_form{
    margin-top : 20px;

    .form_component_wr.form_input{
      width : $form_ele_width;
      margin : 15px auto;
      border: 1px #efefef solid;
      border-radius : 2px;

      input.login_panel_input{
        width : $form_ele_width;
        font-size : 16px;
        height : 34px;
        border: 0;
        padding-left : 10px;
        background-color : transparent;
      }

      input:focus{
        border: 0;
        outline: none;
      }
    }

    .form_component_wr.form_input:first-child{
      margin-top : 30px;
    }

    .form_component_wr.form_btn{
      font-size : 16px;
      color : white;
      background-color : #86ce2f;
      width : $form_ele_width;
      margin : 15px auto;
      text-align : center;
      padding : 8px;
      cursor: pointer;
    }
  }

  @include cf(".hint");

  .hint{
    margin : 24px 0;
  }

  .hint_ele_cr{
    float:right;
    width : 140px;
    text-align: right;

    a{
      outline:none;
      text-decoration: none;
    }

    a:hover{
      text-decoration: underline;
      color : #666;
    }

    .hint_ele{
      color : #666;
      font-size : 10px;
    }

    span.hint_split{
      color: #666;
      font-size : 8px;
    }
  }

  .error_hint{
    margin : 0 auto;
    width : 200px;
    color : red;
    text-align: center;
  }
}

